﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="CRMSystemV2.Web.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>员工作业平台V2.0</title>
    <style type="text/css">
        /* body */
        body{margin: 0px auto;width: 998px;font-size: 12px;line-height: 150%;background: url(/images/bj.jpg) repeat-x 0 0 #45c8f4;}
        p{text-indent: 2em;margin: 5px 5px .5em;line-height: 1.6em;}
        ul{list-style: none;margin: 0px; padding: 0px;}
        img{border: 0;margin: 0;}
        /* txt */
        a:link{color: #161616;text-decoration: none;}
        a:visited{color: #161616;text-decoration: none;}
        a:hover{color: #ff4500;text-decoration: underline;}
        a:active{text-decoration: none;}
        .clearfix{display: block;clear: both;}
        .input_temp{border: 1px solid #3297cc;padding: 5px 0 0 5px;background: url(/images/hk_bg.gif) left top no-repeat;display: inline;height: 20px;}
        /* dl */
        #dl .top_1{height: 113px;background: url(/images/index_01.gif) no-repeat 0 0;margin-bottom: 83px;}
        #dl .top_2{height: 263px;}
        #dl .top_21{width: 235px;background: url(/images/index_03.jpg) no-repeat 0 0;float: left;height: 263px;}
        #dl .top_221{margin: 100px auto auto 230px;}
        #dl .top_222{margin: 30px auto auto 230px;}
        #dl .top_223{margin: 32px auto auto 230px;}
        #dl .top_224{margin-left: 60px;}
        #dl .top_22{width: 564px;background: url(/images/index_04.jpg) no-repeat 0 0;float: left;height: 263px;}
        #dl .top_23{width: 195px; background: url(/images/index_05.jpg) no-repeat 0 0;float: left;height: 263px; }
        #dl .top_31{width: 564px;background: url(/images/index_07.jpg) no-repeat 0 0; height: 105px;margin-left: 235px;padding-left: 100px;}
        #dl .top_311{float: left; width: 180px;margin-right: 20px; }
        #dl .top_312{float: left;width: 180px;  }
        #dl .top_41{width: 564px;background: url(/images/index_10.jpg) no-repeat 0 0;height: 100px;margin-left: 235px;}
    </style>

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>    
    <script type="text/javascript">
        $(document).ready(function () {
            //登录
            $("#login").bind('click', function () {
                if (check()) {
                    $.ajax({ type: "POST",
                        url: "CRMSystemService.asmx/Login",
                        data: "{username:'" + $("#username").val() + "',password:'" + $("#password").val() + "',dycode:'" + $("#dycode").val() + "'}",
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            var data = eval("(" + result.d + ")");
                            if (200 == data.statusCode) {//登陆成功
                                window.location.href = "Index.aspx";
                            }
                            else {
                                alert(data.message);
                                refreshImgCode();
                            }
                        },
                        error: function (x, e) {
                            alert(x.responseText);
                        }
                    });
                }
                return false;
            });
            //退出
            $("#exit").bind('click', function () {
                window.close();
            });            
        });
        //检查填写是否完整
            function check() {
                if ($("#username").val().length > 0) {
                    if ($("#password").val().length > 0){
                            if ($("#dycode").val().length == 4) {
                                return true;
                            }
                            else {
                                alert("验证码不正确");
                                return false;
                            }                       
                    }
                    else {
                        alert("密码不能为空");
                        return false;
                    }
                }
                else {
                    alert("用户名不能为空");
                    return false;
                }
            }
        //刷新验证码
        function refreshImgCode() {
            var img = $("#imgcode");
            img.attr("src", "<%=Application["ValidateCodeURL"] %>?temp=" + Math.random());
        }
    </script>
</head>
<body>    
    <div id="dl">    
        <div class="top_1">
        </div>
        <div class="top_2">
            <div class="top_21">
            </div>
            <div class="top_22">
                <div class="top_221">
                    <input type="text" name="username" id="username" class="input_temp" onfocus="this.style.borderColor='#7cc623';this.style.background='#f7fdff'"
                        onblur="this.style.borderColor='#3297cc';this.style.background='#FFF'" size="32" />
                </div>
                <div class="top_222">
                    <input type="password" name="password" id="password" class="input_temp" onfocus="this.style.borderColor='#7cc623';this.style.background='#f7fdff'"
                        onblur="this.style.borderColor='#3297cc';this.style.background='#FFF'" size="32" />
                </div>
                <div class="top_223">
                    <input type="text" name="dycode" id="dycode" class="input_temp" onfocus="this.style.borderColor='#7cc623';this.style.background='#f7fdff'"
                        onblur="this.style.borderColor='#3297cc';this.style.background='#FFF'" size="5"
                        maxlength="4" />
                    <img id="imgcode" src="<%=Application["ValidateCodeURL"] %>" /><a href="javascript:refreshImgCode();">刷新验证码</a>
                </div>
            </div>
            <div class="top_23">
            </div>
        </div>
        <div class="top_31">
            <div class="top_311">            
                <a id="login" href="">
                    <img src="images/h11.jpg" alt="登录" name="h2" width="170" height="60"></a>
            </div>
            <div class="top_312">
                <a id="exit" href="">
                    <img src="images/h21.jpg" alt="退出" name="h2" width="170" height="60" /></a></div>
        </div>       
        <div class="top_41">
        </div>
    </div>    
</body>
</html>
